<template>
    <view class="nav-box" :class="{ small: small, theme2: theme == 2 }">
        <scroll-view class="scroll-view" scroll-x scroll-with-animation
            :scroll-into-view="'i' + (!scrollToFirst && current_index > 0 ? current_index - 1 : current_index)"
            :style="{ 'line-height': lineHeight, height: height }">
            <view id="nav-list" class="nav-list flex-row" :class="{ equispaced }">
                <view class="nav-item" :class="{ active: value === item[format.value] }" :id="'i' + index"
                    v-for="(item, index) in options" :key="item.index" @click="onClick(index)">
                    <slot :prop="item" :_index="index" name="content">
                        <view class="text">{{ item[format.name] }}</view>
                    </slot>
                </view>
                <!-- <view class="active_bar" :style="{ transform: `translateX(${bar_left}px)`, width: `${currentNodWidth*0.7}px` }"></view> -->
            </view>
        </scroll-view>
    </view>
</template>

<script>
export default {
    name: "thTabs",
    props: {
        options: Array,
        format: {
            type: Object,
            default: () => {
                return {
                    name: 'name',
                    value: 'value'
                }
            },
        },
        lineHeight: {
            type: [String],
            default: '72rpx',
        },
        height: {
            type: [String],
            default: '76rpx',
        },
        value: {
            type: [Number, String],
            default: '',
        },
        scrollToFirst: {
            type: Boolean,
            default: false
        },
        maxNum: {
            // 一屏最大显示数量
            type: [Number],
            default: 4,
        },
        equispaced: {
            // maxNum小于4时是否平均分布
            type: [Boolean],
            default: true,
        },
        small: {
            // 是否时缩小版的
            type: [Boolean],
            default: false,
        },
        theme: {
            type: [Number],
            default: 1,
        },
    },
    // model: {
    //   event: 'change',
    //   prop: 'current',
    // },
    watch: {
        options: {
            handler(val) {
                if (val) {
                    this.$nextTick(() => {
                        this.current_index = this.options.findIndex((item) => item[this.format.value] === this
                            .value) || 0
                        setTimeout(() => {
                            this.setActiveBar()
                        }, 200)
                    })
                }
            },
            immediate: true
        },
        value: {
            handler() {
                this.$nextTick(() => {
                    this.current_index = this.options.findIndex((item) => item[this.format.value] === this
                        .value) || 0
                    setTimeout(() => {
                        this.setActiveBar()
                    }, 200)
                })
            },
            immediate: true
        }
    },
    data() {
        return {
            list_left: 0,
            bar_left: 0,
            currentNodWidth: 0,
            current_index: -1
        }
    },
    // created() {
    //   console.log(this.value)
    // },
    // computed: {
    //   current_index() {
    //     return this.options.findIndex((item) => item[this.format.value] === this.value) || 0
    //   },
    // },
    mounted() {
        this.query = uni.createSelectorQuery().in(this)
        this.setActiveBar()
    },
    methods: {
        onClick(index) {
            this.$emit('input', this.options[index][this.format.value])
            this.$emit('change', this.options[index][this.format.value], index, this.options[index])
            this.$emit('click', this.options[index][this.format.value], index)
            // this.setActiveBar(index)
        },
        setActiveBar(index = this.current_index) {
            if (index === undefined || index < 0) {
                return
            }
            // 获取当前节点信息
            const list_node_info = this.query.select('#nav-list')
            const current_node_info = this.query.select(`#i${index}`)
            list_node_info
                .fields({
                    rect: true
                }, (res) => {
                    // if (res.left) {
                    this.list_left = res.left
                    // this.setActiveBar()
                    // }
                })
                .exec()
            current_node_info
                .fields({
                    rect: true,
                    size: true
                }, (res) => {
                    this.currentNodWidth = res.width
                    this.bar_left =
                        res.left - this.list_left + this.currentNodWidth * 0.15
                })
                .exec()
        },
    },
}
</script>

<style lang="scss">
$color-title: #2e3c4e;
$color-paragraph: #8a929f;
$color-primary: #409eff;

.nav-box {
    width: 100%;
    flex: 1;
    position: relative;
    overflow: hidden;
}

.scroll-view {
    width: 100%;
}

.nav-list {
    display: flex;
    min-width: 100%;
    white-space: nowrap;
    font-size: 0.92rem;
    position: relative;

    &.equispaced {
        justify-content: space-between;
    }

    .active_bar {
        position: absolute;
        width: 58rpx;
        bottom: 8rpx;
        height: 6rpx;
        border-radius: 8rpx;
        background-color: $color-primary;
        // background-image: linear-gradient(
        //   90deg,
        //   rgba($color-primary, 0.85),
        //   rgba($color-primary, 0.20)
        // );
        transition: 0.26s;
    }
}

.nav-item {
    flex-shrink: 0;
    text-align: center;
    padding: 0 24rpx;
    // text-shadow: 0 0 1rpx $color-paragraph;
    transition: 0.26s;
    color: $color-paragraph;
    position: relative;

    .text {
        flex: 1;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
}

.nav-item.active {
    // color: $uni-color-primary;
    // text-shadow: 0 0 1rpx $color-title;
    font-weight: bold;
    color: $color-title;
    // color: #333;
    // border-bottom: 4rpx solid $uni-color-primary;
}

.nav-item:before {
    position: absolute;
    content: '';
    height: 6rpx;
    max-width: 18vw;
    left: 22%;
    right: 22%;
    border-radius: 4rpx;
    margin: auto;
    bottom: 0;
    background-color: $color-primary;
    opacity: 0;
    transition: 0.36s;
}

.nav-item.active:before {
    opacity: 1;
}

.small .nav-list {
    height: 58rpx;
    line-height: 56rpx;
    white-space: nowrap;
    font-size: 0.875rem;

    .nav-item:before {
        height: 5rpx;
        border-radius: 3rpx;
    }
}

.theme2 {
    padding: 15rpx 0;

    .nav-item {
        border: 1rpx solid $color-primary;
        color: $color-primary;
        border-radius: 3px;

        &.active {
            background-color: $color-primary;
            color: #fff;
            position: relative;
        }
    }
}
</style>
